<template>
	<view class="classlist">
		<view class="left">
			<scroll-view scroll-y="true" class="scroll">
				<view class="left_ul">
					<view @click="navClick(index,item.id)" :class="isactive == index ? 'left_li active':'left_li'"
						v-for="(item,index) in list" :key="index">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="right">
			<view class="top">
				<image :src="getimg(list[isactive].img_url)" class="topbanner" mode="widthFix"></image>
			</view>
			<view class="goods" v-for="(item,index) in list" :key='index'>
				<view class="goodsitem" v-for="(item1,index1) in item.Goods" v-if="parent_id == item1.parent_id"
					:key='index1' @click="toPage('/pages/goodsdetail/index?id='+item1.id)">
					<image :src="getimg(item1.logo_url)" mode="widthFix"></image>
					<view class="goodsinfo">
						<view class="name">
							{{item1.name}}
						</view>
						<view class="price" v-if="item1.goods_type == 2">
							零售价：<text class="pricenum">￥{{Number(item1.price)}} </text>
						</view>
						<view class="price" v-if="item1.goods_type == 3">
							体验价：<text class="pricenum">￥{{Number(item1.price)}} </text>
						</view>
						<view class="price" v-if="item1.goods_type == 2">
							会员价：<text class="pricenum vipprice">￥{{Number(item1.vip_price)}} </text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		checkLogin
	} from '../../api/login.js'
	import {
		ClassList
	} from '../../api/api.js'

	export default {
		data() {
			return {
				isactive: 0,
				goodslist: [],
				list: [],
				parent_id: Number,
				login: false,
				imgurl: ''

			}
		},
		onLoad() {
			this.ClassList()

		},
		methods: {

			ClassList() {
				ClassList().then(res => {
					console.log(res)
					// this.goodslist = res.list.Goods
					this.list = res.goods
					this.parent_id = this.list[0].id
					this.imgurl = res.logo
					console.log(this.imgurl)
				})
			},
			navClick(i, id) {
				this.isactive = i
				this.parent_id = id
			},
			getimg(url) {
				return this.websiteUrl + url
			},
			toPage(url) {
				if (!checkLogin()) {
					uni.navigateTo({
						url: '/pages/login/index'
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7 !important;
	}

	.classlist {
		display: flex;

		.left {
			width: 23%;
			height: 100vh;
			box-shadow: 1px 0 4px #a3d3b7;
			padding-top: 20px;
			position: fixed;

			.left_li {
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				color: #4f4f4f;
				font-size: 14px;
			}

			.active {
				color: #fff;
				background: #1d3f2b;
			}
		}

		.right {
			width: 76%;
			padding-top: 20px;
			float: right;
			position: absolute;
			right: 0;

			.topbanner {
				width: 94%;
				margin-left: 3%;
				height: 8rem;
			}

			.goods {
				.goodsitem {
					display: flex;
					width: 90%;
					margin: 10px auto;

					image {
						width: 300rpx;
						// height: 200rpx;
						border-radius: 5px;
					}

					.goodsinfo {
						flex: 1;
						margin-left: 10px;

						.name {
							margin-top: 20rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							width: 250rpx;
							font-size: 14px;
						}

						.price {
							margin-top: 20rpx;
							font-size: 14px;

							.pricenum {
								color: #F23A3A;
								font-size: 14px;
							}

							.vipprice {
								font-size: 18px;
								color: #C79E76;
							}
						}
					}
				}
			}
		}
	}
</style>
